import React, { Component } from 'react'
import SearchInput from '../SearchInput/SearchInput'
import { withRouter } from 'react-router-dom';
import './Home.scss'
import { getHomeFloorData } from '../data/api';
class Home extends Component {
  query = "";
  state = {
    activeTab: "recommend",//默认为推荐
    goods: [],
    floorData: [], // 首页的图片列表的数据
    scrollTop: 0
  }
  // constructor(props){
  //   super(props)
  //   this.state={show:false}
  //   this.handleScroll=this.handleScroll.bind(this)
  // }
  handleTabClick = (e) => {
    console.log(e);
    let activeTab = e.target.dataset["tab"]
    this.setState(() => {
      return {
        activeTab: activeTab
      }
    })
  }
  handelClick = (params) => {
    this.props.history.push("category")
  }
  componentWillUnmount(){
    window.removeEventListener("scroll", this.handleScroll, true)
  }
  /* 2. 发请求 拿数据 */
  async componentDidMount() {

    let floorData = await getHomeFloorData();
    console.log(floorData);
    this.setState({
      floorData: floorData.message,
    });
    window.addEventListener("scroll", this.handleScroll, true)
  }
  //scroll事件
  handleScroll = (params) => {
    console.log("滚动了");
    let scrollTop = document.getElementsByClassName("content")[0].scrollTop
    if(!scrollTop){

    }
    console.log(scrollTop);
    this.setState({
      scrollTop: scrollTop
    })
  }
  //回到顶部
  backTop() {
    document.getElementsByClassName("content")[0].scrollTop = 0
  }
  // 点击图层数据 跳转到产品列表的页面
  handleFloorItemClick = () => {
    this.props.history.push("productList?query=电视");
  };
  render() {
    return (
      <div className='box'>
        {/* 顶部搜索框开始 */}
        <SearchInput></SearchInput>
        {/* 顶部搜索框结束 */}
        {/* 首页nav开始 */}
        <div className="nav" onClick={this.handleTabClick}>

          <div className={this.state.activeTab === 'recommend' ? 'navItem active' : 'navItem'} data-tab="recommend">百货</div>
          <div className={this.state.activeTab === 'dress' ? 'navItem active' : 'navItem'} data-tab="dress">女装</div>
          <div className={this.state.activeTab === 'shoebag' ? 'navItem active' : 'navItem'} data-tab="shoebag">鞋包</div>
          <div className={this.state.activeTab === 'phone' ? 'navItem active' : 'navItem'} data-tab="phone">手机</div>
          <div className={this.state.activeTab === 'food' ? 'navItem active' : 'navItem'} data-tab="food">食品</div>
          <div className={this.state.activeTab === 'baby' ? 'navItem active' : 'navItem'} data-tab="baby">母婴</div>
          <div className={this.state.activeTab === 'jacket' ? 'navItem active' : 'navItem'} data-tab="jacket">男装</div>
        </div>
        {/* 首页nav结束 */}
        {/* 首页内容开始 */}
        <div className="content">
          <div className={this.state.activeTab === "recommend" ? "contentItem" : "hidden"}>
            <div className="img1">
              <img src="https://commimg.pddpic.com/oms_img_ng/2020-11-09/d56cbef4-e7b8-4489-aa4e-5ec3fe8bc15e.jpeg?imageView2/2/w/750/q/80/format/webp" alt="" />
            </div>
            <div className="img2">
              <img src="https://commimg.pddpic.com/oms_img_ng/2020-11-09/12a3ca37-fc50-4000-b130-50875d4b1d43.gif?imageView2/2/w/1300/q/80" alt="" />
            </div>
            <div className="itemTop" onClick={this.handelClick}>
              <div className="itemImg">
                <img src="https://img.pddpic.com/goods/images/2019-12-28/85e3950bf765f4ad4fca5ccac76ed35c.jpeg?imageView2/2/w/1300/q/80/format/webp" alt="" />
                <p>个人清洁</p>
              </div>
              <div className="itemImg">
                <img src="https://img.pddpic.com/goods/images/2019-10-23/fce63395-b968-4c3e-8ca6-b77b63808fec.jpg?imageView2/2/w/1300/q/80/format/webp" alt="" />
                <p>水杯餐具</p>
              </div>
              <div className="itemImg">
                <img src="https://commimg.pddpic.com/phone_adx/35360978-a252-11ea-8260-12e43cb27df4.jpg?imageView2/2/w/1300/q/80/format/webp" alt="" />
                <p>厨房烹饪</p>
              </div>
              <div className="itemImg">
                <img src="https://commimg.pddpic.com/phone_adx/812a675e-ee86-11ea-a8fd-5a83d6482b12.jpg?imageView2/2/w/1300/q/80/format/webp" alt="" />
                <p>收纳整理</p>
              </div>
              <div className="itemImg">
                <img src="https://img.pddpic.com/goods/images/2019-06-07/e8802573-c0be-47cf-b40f-f87c915e0980.jpg?imageView2/2/w/1300/q/80/format/webp" alt="" />
                <p>绿植园艺</p>
              </div>
              <div className="itemImg">
                <img src="https://commimg.pddpic.com/phone_adx/9a9d35e0-f93a-11ea-9ed9-6a0cb0902727.jpg?imageView2/2/w/1300/q/80/format/webp" alt="" />
                <p>宠物用品</p>
              </div>
              <div className="itemImg">
                <img src="https://img.pddpic.com/mms-material-img/2020-09-18/d4e9e074-8c98-4cad-8bd5-296adba78337.jpeg.a.jpeg?imageView2/2/w/1300/q/80/format/webp" alt="" />
                <p>图书乐器</p>
              </div>
              <div className="itemImg">
                <img src="https://img.pddpic.com/goods/images/2020-03-04/8ab98417d75ecd13c84d0ed9452efd91.jpeg?imageView2/2/w/1300/q/80/format/webp" alt="" />
                <p>畜牧农资</p>
              </div>
              <div className="itemImg">
                <img src="https://img.pddpic.com/mms-material-img/2020-09-03/5ee77a71-18cd-454a-9e1f-4b0bf9ac9f6d.jpeg.a.jpeg?imageView2/2/w/1300/q/80/format/webp" alt="" />
                <p>节庆礼品</p>
              </div>
              <div className="itemImg">
                <img src="https://commimg.pddpic.com/oms_img_ng/2020-11-06/ee5e29ae-bdc8-4b58-b43d-71d00456f1aa.png?imageView2/2/w/1300/q/80/format/webp" alt="" />
                <p>畜牧农资</p>
              </div>
            </div>
            <div className="paihang">
              <div className="paihangLeft">
                <div className="leftTitle">
                  <div className="titleTop">
                    <img src="https://pinduoduoimg.yangkeduo.com/hot_friends/2020-03-20/286b39e3-e06e-4aae-b5c7-0014addbbd72.png?imageView2/2/w/45/q/80/format/webp" alt="" />
                    <span>排行榜</span>
                  </div>
                  <div className="titleBottom">
                    每日更新
              </div>
                </div>
                <div className="leftimg1">
                  <img src="https://commimg.pddpic.com/phone_adx/bd1bbaf4-aeb9-11ea-a53c-62ffbe784d06.jpg?imageView2/2/w/108/q/80/format/webp" alt="" />
                </div>
                <div className="leftimg2">
                  <img src="https://img.pddpic.com/goods/images/images/2019-09-26/62d5e30b-54c8-488c-b149-dc72f7dfbeaa.jpg?imageView2/2/w/108/q/80/format/webp" alt="" />
                </div>
              </div>
              <div className="paihangRight">
                <div className="rightTitle">
                  <div className="titleTop">

                    <span>小编推荐</span>
                  </div>
                  <div className="titleBottom">
                    精选好货
              </div>
                </div>
                <div className="rightimg1">
                  <img src="https://commimg.pddpic.com/phone_adx/452f19e4-0af0-11eb-8c37-e665deca3919.jpg?imageView2/2/w/108/q/80/format/webp" alt="" />
                </div>
                <div className="rightimg2">
                  <img src="https://img.pddpic.com/goods/images/2019-10-30/5bfdbfcf-acc4-4539-bd0d-93c2a743d2f7.jpg?imageView2/2/w/108/q/80/format/webp" alt="" />
                </div>
              </div>
            </div>
            <div className="itemContent">
              {this.state.floorData.map((v) => {
                return (
                  <div className='floorDataItem' key={v.floor_title.name}>
                    {/* title 开始 */}
                    <div className='dataItemImg'>
                      <img src={v.floor_title.image_src} alt={v.floor_title.name} />
                    </div>
                    {/* title 结束 */}
                    {/* 图片列表开始 */}
                    <div className='productList'>
                      {v.product_list.map((p) => {
                        return (
                          <div
                            className='productListItem'
                            key={p.image_src}
                            onClick={this.handleFloorItemClick.bind(this, p)}
                          >
                            <div className='imageWrapper'>
                              <img src={p.image_src} alt={p.name} />
                            </div>
                          </div>
                        );
                      })}
                    </div>
                    {/* 图片列表结束 */}
                  </div>
                );
              })}
            </div>
            <div className={this.state.scrollTop > 400 ? 'backTop' : "hidden"} onClick={this.backTop}>
              <span className="iconfont icon-backTop"></span>
            </div>
          </div>
          <div className={this.state.activeTab === "dress" ? "contentItem" : "hidden"}></div>
          <div className={this.state.activeTab === "shoebag" ? "contentItem" : "hidden"}>789</div>
          <div className={this.state.activeTab === "phone" ? "contentItem" : "hidden"}>abc</div>
          <div className={this.state.activeTab === "food" ? "contentItem" : "hidden"}>def</div>
          <div className={this.state.activeTab === "baby" ? "contentItem" : "hidden"}>ghi</div>
          <div className={this.state.activeTab === "jacket" ? "contentItem" : "hidden"}>xyz</div>

        </div>
        {/* 首页内容结束 */}

      </div>
    )
  }
}
export default withRouter(Home)